<template>
  <view>
    <view class="price">
      <view class="income">收支明细</view>

      <view class="allincome">
        <picker mode="selector" @change="bindPickerChange" :value="index" :range="array">
          <view class>{{array[index]}}</view>
        </picker>
        <span class="down-arrow"></span>
      </view>
      <view></view>
      <view></view>
    </view>
    <view class="list-price">
      <view class="list-price-items">
        <view class="first">
          <view class="bold">*明明</view>
          <view class="small">2018-11-27 16:50:20</view>
        </view>
        <view class="sencond">
          <view class="bold">转账</view>
          <view class="bold">-10000.00</view>
        </view>
      </view>
      <view class="list-price-items">
        <view class="first">
          <view class="bold">*明明</view>
          <view class="small">2018-11-27 16:50:20</view>
        </view>
        <view class="sencond">
          <view class="bold">银行卡体现</view>
          <view class="bold">-10000.00 USD</view>
        </view>
      </view>
      <view class="list-price-items">
        <view class="first">
          <view class="bold">*明明</view>
          <view class="small">2018-11-27 16:50:20</view>
        </view>
        <view class="sencond">
          <view class="bold">支付宝体现</view>
          <view class="bold">-10000.00 USD</view>
        </view>
      </view>
        <view class="list-price-items">
        <view class="first">
          <view class="bold">办公会充值</view>
          <view class="small">2018-11-27 16:50:20</view>
        </view>
        <view class="sencond">
          <view class="bold">充值</view>
          <view class="bold">+50000.00 USD</view>
        </view>
      </view>
    </view>
    <view style="height:40px;backroud:red" @tap="ceshi">测试发送给服务器数据的方法</view>
  </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    });
    return {
      array: ["全部", "啊币", "美金(转账、提现)", "QPT消费"],
      index: 0,
      date: currentDate,
      time: "12:01"
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    }
  },
  methods: {
    ceshi() {
      console.log(this.array[this.index]);
    },
    bindPickerChange: function(e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index = e.target.value;
    },
    bindDateChange: function(e) {
      this.date = e.target.value;
    },
    bindTimeChange: function(e) {
      this.time = e.target.value;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped lang="scss">
.price {
  height: 94upx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 5upx;
  font-size: 30upx;
  font-weight: 600;
  text-align: center;
  .income {
    flex-basis: 200upx;
    align-items: center;
  }
  .allincome {
    display: flex;
    align-items: center;
    flex-basis: 350upx;
  }
}
.down-arrow {
  display: inline-block;
  background: url();
  background-size: cover;
  width: 20upx;
  height: 20upx;
  margin-left: 17upx;
}
.first {
  text-align: left;
}
.sencond{
  text-align: right;
}
.list-price {
  background: #fff;
  text-align: center;
  .list-price-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    line-height: 150upx;
    height: 150upx;
    padding: 0 75upx;
    .small {
      flex: 1;
      font-size: 20upx;
      color: #949393;
    }
    .bold {
      flex: 1;
      font-size: 30upx;
      font-weight: 500;
    }
  }
}
</style>